<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>mojoFx Test Page</title>
		
		<!--
		
		<script type="text/javascript" src="../../../tags/independent/mojoFx/1.1/mojoFx-1.1.js"></script>
		-->
		
		<script type="text/javascript" src="mojoFx.js"></script>
		<script type="text/javascript" src="fxEasing.js"></script>
		
		
		<style>
		
		html * {
			outline-style:none;
		}	
			
		body {
			font: 12px "Comic Sans MS",cursive,"Microsoft YaHei",宋体;
		}	
		
		div {
			position:relative;
		}
		
		a {
			text-decoration:none;
		}
			
			
		div.test-header {
		    background-color: #0D3349;
		    color: #FFFFFF;
			text-align:center;
		}
		
		div.test-body {
			position:relative;
			width:100%;
			height:100%;
		}
		
		div.test-control {
			position:absolute;
			bottom:0;
			width:98%;
			background-color:#0D3349;
			color: #FFFFFF;
			padding:5px;
		}
		
		
		div.test-target {
			position:absolute;
			margin:10px;
			border:25px solid;
			border-color: #FF9933 #339999 #CC3399 #999900;
			width:0;
			height:0;
			display:block;
		}
		
		a.test-target:hover {
			border-left-color: #3399CC;
		}
		
		/* Round corner */
		b.rtop, b.rbottom {
			display:block;
			background-color: #FFF
		}
		b.rtop b, b.rbottom b {
			display:block;
			height: 1px;
			overflow: hidden; 
			background-color: #0D3349
		}
		b.r1{
			margin: 0 5px;
		}
        b.r2{
        	margin: 0 3px;
		}
        b.r3{
        	margin: 0 2px;
		}
		b.r4 {
			margin: 0 1px;
			height: 2px;
		}

		</style>
	</head>
	<body>
		<div class="test-header" id="test-header">
			<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
			<h2>mojoFx test case</h2>
			<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
		</div>

		<div class="test-body">
			<div class="test-target" id="test-target">
			</div>
		</div>
		
		<div class="test-control" id="test-control">
			<button  onclick="baseTest()">Base test</button>
			<button  onclick="easingTest()">Easing test</button>
			<button onclick="colorTest()">Color test</button>
			<button onclick="delayTest()">Delay test</button>
			<button onclick="QueueFalseTest()">Queue (false) test</button>
			<button onclick="StopTrueTest()">Stop (true) test</button>
			<button onclick="StopFalseTest()">Stop (false) test</button>
		</div>
		
	</body>
	
	<script type="text/javascript">
		var target = document.getElementById("test-target");
		
		function baseTest() {
			mojoFx(target)

			 .anim({
			 	height:100,
				width: "100"
			 })
			 
			 .anim({
			 	borderTopWidth:3,
				borderRightWidth:3,
				borderLeftWidth:3,
				borderBottomWidth:3
			 }, 1000)
			 
			 
			 .anim({
			 	backgroundColor:"#999999"
			 }, 1000)

			 .anim({
			 	left:"+=400"
			 }, 1000)

			 .anim({
			 	top:"+=400px"
			 }, 1000)
			 
			 .anim({
			 	left:"0px",
			 	top:"-=400"
			 }, function() {
			 	this.innerHTML = "this is callback"
			 }, 1000)

			 .anim({
			 	opacity:0
			 }, function(a) {
					this.innerHTML = a + "<br>" + this;
			 }, ["arguments"], 1000)
				
			 .anim({
			 	opacity:"1"
			 }, 1000)
			 
			 .anim({
			 	height:0,
			 	width:0,
				borderWidth: 25
			 }, 1000, function() {
			 	this.innerHTML = "";
			 })

		}
		
		
		function easingTest() {
			var el = target.cloneNode(true);
			el.mojoData = null;
			
			document.body.appendChild(el);
			
			mojoFx(el)
			
			.anim({
				top:["+=500px", "bounceOut"],
				left:["+=500",  "quadOut"]
			}, 2000)
			
			.anim({left:"+=600"}, 1500, "elasticIn")
			
			.anim({
				borderTopWidth:0,
				borderRightWidth:0,
				borderLeftWidth:0,
				borderBottomWidth:0,
				top:"+=12",
				left: "+=12"
			}, "cubicOut", function(){
				this.parentNode.removeChild(this);
			})
		}

		function colorTest() {
			mojoFx(target)
			
			.anim({
				width:"100",
				height:"100"
			}, 600)
			.anim({
				backgroundColor:"#669933",
				borderTopColor:"#ffffff",
				borderRightColor:"#ffffff",
				borderLeftColor:"#ffffff",
				borderBottomColor:"#ffffff"
			}, 1200)		
			.anim({
				backgroundColor:"rgb(199, 199, 255)"				
			}, 1200)	
			.anim({
				width:0,
				height:0
			})			
			.anim({
				borderBottomColor:"#999900"
			})
			.anim({
				borderLeftColor:"#CC3399"
			})
			.anim({
				borderTopColor:"#FF9933"
			})
			.anim({
				borderRightColor:"#339999"
			})			
		}
		
		
		function delayTest() {
			
			var arr = [];
			
			for(var i = 0; i < 2; i++) {
				var el = target.cloneNode(false);
				el.mojoData = null;
				
				document.body.appendChild(el);
				arr.push(el);
			}
			
			mojoFx(arr[0]).anim({left: "+=500"}, 5000)
			mojoFx(arr[1]).anim({left: "+=500"}, 1000)	
			
			mojoFx(arr)
			.delay(500)
			.anim({top:"+=500"}, 1000)
			.delay(500)
			.anim({left:"-=500"})
			.delay(500)
			.anim({top:"-=500"},function(){
				 this.parentNode.removeChild(this);
			})

		}

		function QueueFalseTest() {
			mojoFx(target)
				     .anim({
					 	height: "+=100", 
						width: "+=100", 
						borderTopWidth:1,
						borderRightWidth:1,
						borderLeftWidth:1,
						borderBottomWidth:1
						}, false, 8000)
			         .anim({left: "+=500"}, 2000)
					 .anim({top: "+=300"}, 2000)
					 .anim({left: "-=500"}, 2000)
					 .anim({top: "-=300"}, 2000)
					 .anim({height: 0, width: 0, borderWidth: 25})				
		}
		
		function StopTrueTest() {
			mojoFx(target).stop(true);
		}
		
		function StopFalseTest() {
			mojoFx(target).stop();
		}
		
	</script>
</html>
